<template>
  <div id="left-nav">
    <div class="row row-1"></div>
    <div class="row row-2">
      <div class="declare">
        <p class="ellipsis">功能列表</p>
      </div>
    </div>
    <div class="row row-3">
      <vue-scroll :ops="ops">
        <ul>
          <li
            v-for="(item, index) in options"
            :key="index"
            :index="index"
            :class="
              activeKey && activeKey.indexOf(item.key) !== -1
                ? 'item active'
                : 'item'
            "
            @click="navClick(item)"
          >
            <p class="ellipsis">{{ item.name }}</p>
          </li>
        </ul>
      </vue-scroll>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ops: {
        bar: {
          onlyShowBarOnScroll: true, //是否只有滚动的时候才显示滚动条
          background: "transparent"
        }
      }
    };
  },
  methods: {
    navClick(item) {
      if (item.to === this.activeKey) {
        return;
      }
      this.$router.push(item.to);
    }
  },
  computed: {
    options() {
      return this.$store.state.nav.options;
    },
    activeKey: {
      get() {
        return this.$store.state.nav.activeKey;
      },
      set(val) {
        this.$store.commit("setActiveKey", val);
      }
    }
  },
  mounted() {
    this.activeKey = this.$route.path;
  },
  components: {},
  watch: {
    $route: function(val) {
      this.activeKey = val.path;
    }
  }
};
</script>

<style lang="stylus" scoped>
#left-nav
  position relative
  width 100%
  height 100%
  background transparent

  > .row-1
    height 55px

  > .row-2
    height 59px
    padding 30px 0

    > .declare
      margin 0 auto

  > .row-3
    height 860px
    > .__vuescroll
      > .__panel
        > .__view
          > ul
            position relative
            width 299px
            margin 0 auto

            > li
              position relative
              width 299px
              height 132px
              padding 5px 0
              text-align center
              line-height 132px
              font-size 34px
              font-weight bold
              color #fff
              z-index 9

            > li.active
              color #1EF3FF

            > li::before
              content ''
              position absolute
              left 0
              width 299px
              height 132px
              background url("../../assets/img/index/20190703082557.png") no-repeat top left
              background-size 299px 132px
              z-index -1
</style>
